
<template>
  <div class="box">
    <div class="ant-page-header">
      <div class="ant-page-header-heading-left">
        <span class="ant-page-header-heading-title" title="资讯分类">资讯分类</span>
        <span class="ant-page-header-heading-sub-title" title="对于文章的进行的相关分类">对于文章的进行的相关分类</span>
      </div>
    </div>
    <div class="form">
      <!-- 新增一行 -->
      <div class="ant-pro-table-list-toolbar">
        <div class="ant-pro-table-list-toolbar-container">
          <el-button type="primary" style="height:38px" @click="dialogShow = true">新增查询</el-button>
          <i class="el-icon-refresh-right" />
          <i class="el-icon-upload2" />
          <i class="el-icon-setting" />
        </div>
      </div>
      <el-table
        :header-cell-style="{background:'#fafafa', color:'#252525'}"
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="280"
        />
        <el-table-column
          prop="catename"
          label="分类名"
          width="700"
        />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="editRow(row.id)">编辑</el-button>&nbsp;&nbsp;
            <el-button type="text" @click="delRow(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="page">
        <el-pagination
          :current-page.sync="queryData.current"
          :page-sizes="[10, 20 , 30, 40]"
          :page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </div>
      <!-- 弹出层 -->
      <el-dialog
        :title="`${title}分类`"
        :visible.sync="dialogShow"
        width="30%"
        @close="onClose"
      >
        <el-form ref="form" label-position="top" :model="formData" :rules="formRules" label-width="80px" :inline="false" size="normal">
          <el-form-item prop="catename" label="分类名称">
            <el-input v-model="formData.catename" />
          </el-form-item>
        </el-form>

        <el-row type="flex" justify="center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="dialogShow = false">取消</el-button>
        </el-row>
      </el-dialog>

    </div>
  </div>

</template>

<script>
import { getCateListApi, getCateInfoApi, editCateApi, addCateApi, delCateApi } from '@/api/bjd/cate'
export default {
  name: 'CatePage',
  data() {
    return {
      list: [],
      dialogShow: false,
      queryData: {
        catename: '',
        current: 1,
        pageSize: 5
      },
      total: 0,
      // 弹出层
      formData: {
        catename: ''
      },
      formRules: {
        catename: [{
          required: true,
          message: '请输入分类名',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 渲染页面
    async initData() {
      const res = await getCateListApi(this.queryData)
      console.log(res)
      this.list = res.data.rows
      this.total = res.data.count
    },
    // ====================分页====================
    // 每页数量切换
    sizeChange(val) {
      console.log(val) // 最新每页数量
      this.queryData.pageSize = val
      this.initData()
    },
    // 页码切换
    currentChange(val) {
      // console.log(val) // 最新页码
      this.queryData.current = val
      this.initData()
    },
    // ===================弹出层======================
    // 提交
    async onSubmit() {
      // 1.表单校验
      await this.$refs.form.validate()
      // 2.处理数据
      // 3.发送添加请求
      this.formData.id ? await editCateApi(this.formData) : await addCateApi(this.formData)
      // 4.提示添加成功
      this.$message.success('操作成功')
      // 5.关闭弹框
      this.dialogShow = false
      // 6.显示数据
      this.initData()
    },
    // 取消
    onClose() {
      this.formData = {
        catename: ''
      }
      this.$refs.form.clearValidate()
    },

    // ==================================================
    // 编辑框
    async editRow(id) {
      // 1.获得行数据
      const res = await getCateInfoApi(id)
      // 2.加工处理数据
      // 3.给表格赋值
      this.formData = res.data
      // 4.打开弹框
      this.dialogShow = true
    },
    // 删
    async delRow(id) {
      this.$confirm('确认删除吗?', '提示').then(async() => {
        await delCateApi(id)
        if (this.list.length === 1 && this.formData.page > 1) this.formData.page--
        this.$message.success('删除成功')
        this.initData()
      }).catch(() => {
        this.$message.info('已取消')
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.box{
  background-color: #fafbfc;
}
.ant-page-header {
    box-sizing: border-box;
    margin: 3% 4% 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum","tnum";
    position: relative;
    padding: 16px 24px;
}
.ant-page-header .ant-page-header-heading-left {
    display: flex;
    align-items: center;
    margin-block: 4px;
    margin-inline-end: 0;
    margin-inline-start: 0;
    overflow: hidden;
}
.ant-page-header .ant-page-header-heading-title {
    margin-inline-end: 12px;
    margin-block-end: 0;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ant-page-header.ant-page-header-heading-title {
      margin-inline-end: 12px;
    margin-block-end: 0;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ant-pro-table-list-toolbar {
    line-height: 1;
    float: right;
}
.ant-pro-table-list-toolbar-container {
    display: flex;
    justify-content: space-between;
    padding-block: 16px;
    padding-inline: 0;

}
i{
  margin:9px 13px ;
  font-size:22px
}
.form{
  margin: 0  5%;
  background-color: #fff;
  padding: 0 2%;
}

</style>

